import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Block, Image} from '@tarojs/components'
import {AtIcon, AtDrawer} from 'taro-ui';
import {vcmonitor} from "../../../utils/tools";
import SelectDate from "../components/select-date/select-date";
import Screen from "../../components/screen/screen";
import GzhAuth from "../../../components/gzh-auth/gzh-auth";
import {user} from "../../../utils/user.service";
import {http} from "../../../utils/http";
import {MARKETPERFORMANCE_APP_ALL_SITE, PRODUCT_ORDER_LIST} from "../../../constants/api";
import './index.scss'

type PageOwnProps = {};
type PageState = {
  listData: any
  drawerShow: boolean
  options: object
  formData: object
}

class Index extends Component {
  state: PageState = {
    listData: [],
    drawerShow: false,
    options: [
      {
        title: '站点',
        type: 'tag',
        key: 'tag',
        active: 0,
        data: [
          {
            label: '长沙',
            value: 0
          },
          {
            label: '武汉',
            value: 1
          },
          {
            label: '西安',
            value: 2
          }
        ]
      },
      {
        title: '门店',
        type: 'input',
        placeholder: '请输入要搜索的门店名称',
        key: 'store'
      },
      {
        title: '商品',
        type: 'input',
        placeholder: '请输入要搜索的商品名称',
        key: 'product_name',
        isNumber: true
      }
    ],
    formData: {
      productName: '',
      supplier_id: '104',
      location: '',
      store: '',
      endDate: '',
      startDate: ''

    }
  }

  async componentDidShow() {
    vcmonitor(this)
    const isLogin = await user.checkLogin()
    if (!isLogin) {
      Taro.showToast({
        title: '你还未登录，请登录',
        icon: 'none',
      })
      const timer = setTimeout(() => {
        clearTimeout(timer)
        user.jumpLogin()
      }, 1500)
      return
    }

    const siteRes = await http.HPost(MARKETPERFORMANCE_APP_ALL_SITE, this.state.formData)
    if (siteRes) {
      const {options} = this.state
      options[0].data = siteRes.data
      this.setState({
        options
      })
    }
    this.getData()
  }

  async getData() {
    const res = await http.HGet(PRODUCT_ORDER_LIST, this.state.formData)
    if (res) {
      this.setState({
        listData: res.data.goods_list
      })
    }
  }

  // 开始时间
  changeStart(date) {
    const formData = this.state.formData;
    const options = this.state.options;
    formData.startDate = date;

    // 筛选数据返回
    this.setState({
      formData,
      options
    });
    this.getData()
  }

  // 结束时间
  changeEnd(date) {
    const formData = this.state.formData;
    const options = this.state.options;
    formData.endDate = date;

    // 筛选数据返回
    this.setState({
      formData,
      options
    });
    this.getData()
  }

  // 关闭筛选
  setDrawer(drawerShow) {
    this.setState({
      drawerShow
    });
  }

  // 监听抽屉返回数据
  screenChange(v, k, i) {
    const formData = this.state.formData;
    const options = this.state.options;
    if (k === 'tag') {
      formData.location = v;
    }
    if (k === 'product_name') {
      formData.productName = v;
    }
    if (k === 'store') {
      formData.store = v;
    }
    if (k == 'tag') {
      options[i].active = v;
    }
    // 筛选数据返回
    this.setState({
      formData,
      options
    });
    this.getData()
  }

  // 截取名字
  getName(name) {
    if (name) {
      return name.length < 31 ? name : name.substr(0, 31) + '...';
    }
    return ''
  }

  render() {
    const {listData, options, drawerShow} = this.state;
    return (
      <View className='vedrifcation'>
        <GzhAuth />
        <SelectDate
          changeState={this.changeStart.bind(this)}
          changeEnd={this.changeEnd.bind(this)}
          changeScreen={this.setDrawer.bind(this, true)}
          small
        />
        <View className='list'>
          {
            listData && listData.length > 0 && listData.map(item => {
              return (
                <Block key={item.id}>
                  <View className='list-item'>
                    <View className='list-item-header'>
                      <View className='list-item-header-left'>
                        <View className='list-item-header-left-image'>
                          <Image src={item.default_image} style='width:100% ; height:100%'></Image>
                        </View>
                      </View>
                      <View className='list-item-header-right'>
                        <View className='list-item-header-right-name'>
                          {this.getName(item.name)}
                        </View>
                        <View className='list-item-header-right-index'>
                          编号：{item.no}
                        </View>
                        <View className='list-item-header-right-position'>
                          <AtIcon prefixClass='car' size='12' value='icondizhi' className='m-r-10'></AtIcon>
                        </View>
                      </View>
                    </View>
                    <View className='list-item-count'>
                      核销数：<Text className='count'>{item.sum_check_num}</Text>
                    </View>
                  </View>
                </Block>
              )
            })
          }
        </View>
        <AtDrawer
          show={drawerShow}
          mask
          onClose={this.setDrawer.bind(this, false)}
          right
        >
          <Screen
            options={options}
            onChange={this.screenChange.bind(this)}
          />
        </AtDrawer>
      </View>
    );
  }
}

export default Index as ComponentClass<PageOwnProps, PageState>
